<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性基本用法</title>
</head>

<body>
    <script src="/js/vue.js"></script>
    <div id="app">
        <p>本次中考的总成绩为：{{getTotalScore()}}</p>
        <p>本次中考的总成绩为：{{getTotalScore()}}</p>
        <p>本次中考的总成绩为：{{getTotalScore()}}</p>
        <p>本次中考的总成绩为：{{getTotalScore()}}</p>
        <p>本次中考的总成绩为：{{getTotalScore()}}</p>
        <p>本次中考的总成绩为：{{getTotalScore()}}</p>

        <br>
        <p>本次中考的总成绩为：{{totalScore}}</p>
        <p>本次中考的总成绩为：{{totalScore}}</p>
        <p>本次中考的总成绩为：{{totalScore}}</p>
        <p>本次中考的总成绩为：{{totalScore}}</p>
        <p>本次中考的总成绩为：{{totalScore}}</p>
        <p>本次中考的总成绩为：{{totalScore}}</p>



    </div>

    <script>
        let app = new Vue({
            el: "#app",
            data: {
                scores: [
                    {
                        id: 01,
                        name: "语文",
                        score: 95
                    }, {
                        id: 02,
                        name: "数学",
                        score: 120
                    }, {
                        id: 03,
                        name: "英语",
                        score: 118
                    }, {
                        id: 04,
                        name: "物理",
                        score: 97
                    },
                    {
                        id: 05,
                        name: "化学",
                        score: 98
                    }
                ]
            },
            methods: {
                getTotalScore() {
                    let result = 0;
                    for (const subject of this.scores) {
                        result += subject.score
                    }
                    console.log("函数进行一次循环，进行计算");
                    return result
                }
            },
            computed: {
                // 计算属性有缓存，只需要运算一次，效率更高
                //computed计算属性依赖Vue实例的数据，只要其中任意数据发生变化，计算属性就会重新计算处理，返回最新结果，更新视图。

                totalScore() {
                    // 简写，简单用法，只读
                    let result = 0;
                    for (const subject of this.scores) {
                        result += subject.score
                    }
                    console.log("计算属性进行一次循环，进行计算");
                    return result
                }
            }
        })
    </script>
</body>

</html>